<template>
	<view class="eatpage">
		<view class="box">
			<view class="pickerbox">
				<view class="iconfont icon-clock">
					
				</view>
				<view class="pickerline">
					<picker mode="time" :value="starttime" start="00:00" end="23:59" @change="bindDateChangestart">
							<view class="picker">{{starttime}} <view class="iconfont icon-xiangyou1"></view> </view>
					</picker>
										<view class="title">
											首次进食开始时间
										</view>
				</view>
			</view>
		
			<view class="pickerbox">
				<view class="iconfont icon-guanbinaozhongx">
					
				</view>
				<view class="pickerline">
					<picker mode="time" :value="endtime" start="00:00" end="23:59" @change="bindDateChangeend">
							<view class="picker">
							  <view class="date">
								{{endtime}}
							   </view>
							   <view class="iconfont icon-xiangyou1"></view>
							  </view>
					</picker>
										<view class="title">
											最后进食结束时间
										</view>
				</view>
			</view>
		
		</view>
		<view class="contentbox">
			<view class="title">
				进食窗口建议
			</view>
			<view class="content">
				<view >
					1.起床后1-2小时以后开始进食
				</view>
				<view >
					2.睡觉前2-3小时之前结束进食
				</view>
				<view >
					3.饮食窗口期间建议在12小时以内
				</view>
				
			</view>
		</view>
		<view class="pagebtn">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				starttime:'09-20',
				endtime:'09-20'
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.eatpage{
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
		.box{
			width: 100%;
			background-color: white;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 20rpx;
			
			.pickerbox{
				width: 100%;
				display: flex;
				align-items: center;
				.iconfont{
					font-size: 40rpx;
					color: #1a4f8a;
					margin: 0 20rpx;
				}
				.pickerline{
					width: 85%;
					picker{
						width: 100%;
						.picker{
							
							width: 300rpx;
							height: 80rpx;
							text-align: center;
							font-size: 46rpx;
							
							position: relative;
							display: flex;
							align-items: center;
							justify-content: space-between;
							color: black;
							font-weight: bold;
							.iconfont{
								position: absolute;
								right: 0;
								font-size: 32rpx;
								color: black;
							}
							
						}
						
					}
					.title{
						font-size: 30rpx;
						color: #C2C2C2;
						font-weight: bold;
					}
				}
			}
		}
		.contentbox{
			width: 100%;
			height: 400rpx;
			border-radius: 20rpx;
			background-color: white;
		    margin-top: 40rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.title{
				height: 20rpx;
				line-height: 20rpx;
				padding-left: 30rpx;
				font-weight: bold;
				color: #575757;
				border-left: 6rpx solid #1a4f8a;
			}
			.content{
				width: 100%;
				margin-top: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				color:#9F9F9F;
			}
			
		}
		.pagebtn{
			width: 80%;
			height: 80rpx;
			text-align: center;
		   margin: auto;
		   margin-top: 200rpx;
		   border-radius: 40rpx;
		line-height: 80rpx;
		background-color: #1a4f8a;
		color: white;
		font-weight: bold;
		}
	}

</style>
